import { PlusCircleFilled } from '@ant-design/icons'
import { Row, Spin } from 'antd'
import HomeCard from '../../components/HomeCard'
import './index.css'
import { useEffect, useState } from 'react'
import { get } from 'http'
import { getDriversCountByStatus, getVehiclesCountByStatus, getVehiclesInfoList, getVehiclesMileList, getVehiclesUseTimesList } from './services'
import { useNavigate } from 'react-router-dom'
import { Columns } from '../../components/HomeCard/constant'

export default function Home() {
  const navigate = useNavigate()
  /** 车辆 */
  const [vehiclesInfo, setVehiclesInfoList] = useState([])
  const [vehicleStatus, setVehicleStatus] = useState([])
  const [driverStatus, setDriverStatus] = useState([])
  const [useInfo, setUseInfo] = useState([])
  const [mileageInfo, setMileageInfo] = useState([])

  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    // 获取车辆信息
    const queryList = async () => {
      await getVehiclesInfoList().then(res => {
        setVehiclesInfoList(res.data.data)
        // console.log(res.data.data)
      })
      await getVehiclesCountByStatus().then(res => {
        setVehicleStatus(res.data.data)
      })
      await getDriversCountByStatus().then(res => {
        setDriverStatus(res.data.data)
      })
      await getVehiclesMileList().then(res => {
        setMileageInfo(res.data.data)
      })
      await getVehiclesUseTimesList().then(res => {
        setUseInfo(res.data.data)
      })
      setLoading(false)
    }
    queryList()
    // 获取车辆状态
    // 获取驾驶员状态
    // 获取用车信息
    // 获取车辆里程信息
  }, [])

  return (
    <div className="home-content">
      <div className="home-title-container">
        <div className="home-title">车辆管理系统</div>
      </div>
      <div className="detail">
        适用于企业的车辆管理系统，包括：车辆、驾驶员档案、用车申请、出车记录、加油管理、维修保养管理、违章事故、年检保险等几大方面。<span style={{ color: '#f3d412', fontWeight: 'bold' }}>在PC和移动端动态掌握车辆和驾驶员状态，提高车辆使用效率，降低管理难度。</span>
      </div>
      <div className="card-list">
        <HomeCard
          title="用车管理"
          type="icon"
          dataSource={
            <>
              <a
                className="card-content-item"
                onClick={() => {
                  navigate('/basic-settings/fuel-card-info')
                }}>
                <PlusCircleFilled />
                
                <span>用车申请</span>
              </a>
              <a
                className="card-content-item"
                onClick={() => {
                  navigate('/basic-settings/fleet-info')
                }}>
                <PlusCircleFilled />
                <span>车队申请</span>
              </a>
              <a
                className="card-content-item"
                onClick={() => {
                  navigate('/return-management/return-request')
                }}>
                <PlusCircleFilled />
                <span>还车申请</span>
              </a>
            </>
          }
        />

        <HomeCard
          title="加油管理"
          type="icon"
          dataSource={
            <>
             <a
                className="card-content-item"
                onClick={() => {
                  navigate('/refuel-management/refuel-recharge')
                }}>
                <PlusCircleFilled />
                
                <span>油卡申请</span>
              </a>
              <a
                className="card-content-item"
                onClick={() => {
                  navigate('/refuel-management/refuel-recharge')
                }}>
                <PlusCircleFilled />
                
                <span>油卡充值</span>
              </a>
              <a
                className="card-content-item"
                onClick={() => {
                  navigate('/refuel-management/vehicle-refuel-registration')
                }}>
                <PlusCircleFilled />
               
                <span> 加油登记</span>
              </a>
            </>
          }
        />
        <HomeCard
          title="维修管理"
          type="icon"
          dataSource={
            <>
              <a 
                className="card-content-item"
                onClick={() => {
                  navigate('/vehicle-repair/vehicle-repair-apply')
                }}>
                <PlusCircleFilled />
                <span>
                维修登记
                </span>
                
              </a>
            </>
          }
        />
      </div>
      <Spin spinning={loading}>
        <div className="card-list">
          <HomeCard title="车辆明细" type="table"columns={[...Columns]}  dataSource={vehiclesInfo} />
        </div>
        <div className="card-list">
          <HomeCard title="车辆、管理员状态" type="cards" dataSource={[...vehicleStatus, ...driverStatus]} />
        </div>
        <div className="card-list">
          <HomeCard title="车辆里程" type="bar" dataSource={mileageInfo} />
          <HomeCard title="车辆出车统计" type="line" dataSource={useInfo} />
        </div>
        {/* <div className="card-list">
        <HomeCard title="用车管理" type="line" dataSource={['apply', 'xxx']} />
      </div> */}
      </Spin>
    </div>
  )
}
